<template>
  <div class="my-tree">

    <div
      class="brother"
      v-for="(data, idx) of treeData"
      :key="idx">
      <div class="node">
        <span @click="data.checked=!data.checked" v-if="(data.children).length>0">
          <span class="node-expand iconfont icon-wenjianjia" type="text"></span>
        </span>
        <span class="node-expand iconfont icon-wenjian1" type="text" v-else></span>
        <span class="node-text" @click="handleSelectPart(data)">
          <span>{{data.text}}</span>
        </span>

          <span class="action-content">
        <span class="select-children" @click="data.checked=!data.checked" v-if="(data.children).length>0">
          <span class="iconfont icon-xiaji" type="text">下级</span>
        </span>
          <span class="iconfont icon-bianji" @click="handleEditPart(data)"></span>
          <span v-if="(data.children).length<=0" class="iconfont icon-shanchu" @click="handleDeletePart(data)"></span>
            </span>
      </div>
      <div
        class="children"
        v-if="data.children && data.children.length"
        v-show="data.checked">
        <my-tree
          @selectPart="selectPart"
          @deletePart="deletePart"
          @editPart="editPart"
          :treeData="data.children">
        </my-tree>
      </div>
    </div>
    <div class="module-tree-none" v-if="treeData.length<=0">
      暂无数据！
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        curId:-1
      }
    },
    name: 'my-tree',
    props: {
      treeData: {
        type: Array,
        default: () => [
        {
          id: 3,
          expand: false,
          name: '集团',
          children: [{
            id: 4,
            expand: false,
            name: '客服部'
          },
            {
              id: 5,
              expand: false,
              name: '研发部',
              children: [{
                id: 6,
                expand: false,
                name: '后台',

                children: [{
                  id: 8,
                  expand: false,
                  name: 'JAVA'
                },
                  {
                    id: 9,
                    expand: false,
                    name: 'PHP'
                  }]
              },
                {
                  id: 7,
                  expand: false,
                  name: '前端'
                }]
            }]
        }]
    }
  },
  mounted(){
//    this.treeData=[];
    console.log(this.treeData,11111)
  },
  methods: {
    handleSelectPart(item){
      console.log(item)
      this.$emit('selectPart',item);
    },

    selectPart(item){
      this.$emit('selectPart',item);
    },

    handleDeletePart(item){
      this.$emit('deletePart',item);
    },
    deletePart(item){
      this.$emit('deletePart',item);
    },
    handleEditPart(item){
      this.$emit('editPart',item);
    },
    editPart(item){
      this.$emit('editPart',item);
    },
  }
  }
</script>
<style>

  .action-content{
    position: absolute;
    top:8px;
    right: 0;
  }
  .action-content .iconfont{
    padding:0 3px;
    font-size: 24px;
    color: #666;
  }
  .action-content .icon-bianji{
    font-size: 20px;
    color: #007EE5;
  }
  .node{
    position: relative;
    /*border-bottom:1px solid #eee;*/
    padding:8px 0;
    min-height: 40px;
  }
  .node .node-expand{
    padding:0 5px;
    color:#f1b936;
    font-size: 22px;
  }
  .node .icon-xuanzhong{
    padding:0 5px;
    color:#26a2ff;
    font-size: 22px;
  }
  .node-text{
    display: inline-block;
    width: 80%;
    font-size: 16px;
    color: #333;
  }
  .tree-kongge{
    display: inline-block;
    vertical-align: middle;
    width: 10px;
  }
  .my-tree{
    padding:0 0 8px;
    /*min-height: 100px;*/
  }
  .my-tree .children{
    padding-left: 16px;

  }
.select-children .icon-xiaji{
  display: inline-block;
  width: 100px;
  padding:0 8px;
  font-size:18px;
  text-align: right;
  color: #007EE5;
}
  .module-tree-none{
    padding:24px 0 0;
    font-size: 18px;
    text-align: center;
    color: #999;
  }
  .top-department{
    padding:8px 0;
  }
  .top-department .iconfont{

    padding:0 5px;
    color:#f1b936;
    font-size: 22px;
  }
</style>
